<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var colM = [
            { title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
            { title: "Customer Name", width: 120, dataIndx: "ContactName" },
            { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "integer", editable: false },
		    { title: "Order Date", width: "100", dataIndx: "OrderDate", dataType: "date" },
		    { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date" },
		    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
		    { title: "Shipping Via", width: 100, dataIndx: "ShipVia" },
            { title: "Freight", width: 100, align: "right", dataType: "float", dataIndx: "Freight" },
            { title: "Shipping Name", width: 160, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 200, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 120, dataIndx: "ShipRegion" },
            { title: "Shipping Postal Code", width: 140, dataIndx: "ShipPostalCode" }
        ];

        var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            recIndx: "OrderID",
            url: "/Content/orders.json",      
            //url: "/pro/orders/get",
            //url: "/pro/orders.php",//for PHP
            getData: function (dataJSON) {
                var data = dataJSON.data;
                //expand the first row.
                if (data && data.length) {
                    data[0]['pq_detail'] = { 'show': true };
                }
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
            }
        }

        var $gridMain = $("div#grid_md").pqGrid({
            width: 800, height: 500,
            dataModel: dataModel,            
            colModel: colM,
            wrap: false,
            hwrap: false,
            numberCell: { show: false },            
            title: "<b>Shipping Orders</b>",            
            freezeCols: 1,            
            virtualX: true,            
            hoverMode: null,
            selectionModel: { type: 'cell' },
            pageModel: { type: 'local', rPP: 20 },
            detailModel: {
                cache: true,
                collapseIcon: "ui-icon-plus",
                expandIcon: "ui-icon-minus",
                init: function (ui) {
                    var rowData = ui.rowData,
                        orderID = rowData["OrderID"];

                    //make a deep copy of gridDetailModel
                    var objCopy = $.extend(true, {}, gridDetailModel);                    

                    objCopy.dataModel.url = "/pro/orderdetails/get?orderId=" + orderID;
                    objCopy.dataModel.error = function () {
                        $gridMain.pqGrid("rowInvalidate", { rowData: rowData });
                    };
                    var $grid = $("<div></div>").pqGrid(objCopy);
                    return $grid;
                }
            }
        });

        //details grid
        var gridDetailModel = {
            height: 130,
            width: "600",
            pageModel: { type: "local", rPP: 5, strRpp: "" },
            columnBorders: false,
            rowBorders: false,
            dataModel: {
                location: "remote",
                sorting: "local",
                dataType: "jsonp",
                method: "GET",
                sortIndx: "ProductName",
                getData: function (dataJSON) {
                    return { data: dataJSON.data };
                }
            },            
            colModel: [
                { title: "Order ID", width: 85, dataIndx: "OrderID" },
                { title: "Product ID", width: 95, dataType: "integer", dataIndx: "ProductID" },
                { title: "Product Name", width: 150, dataIndx: "ProductName" },
		        { title: "Unit Price", width: "100", align: "right", dataIndx: "UnitPrice", dataType: "float",
		            summary: {
		                type: ["sum"],
		                title: ["<b style='font-weight:bold;'>Total Price:</b> ${0}"]
		            }
		        },
		        { title: "Quantity", align: "right", width: 85, dataIndx: "Quantity", dataType: "integer",
		            summary: {
		                type: ["sum"],
		                title: ["<b style='font-weight:bold;'>Total Qty:</b> {0}"]
		            }
		        },
		        { title: "Discount", width: 80, align: "right", dataIndx: "Discount", dataType: "float" }
		    ],
            groupModel: {
                dataIndx: ["OrderID"],
                dir: ["up"],
                title: ["{0} - {1} product(s)"],
                icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
            },
            freezeCols: 0,
            flexHeight: true,
            numberCell: { show: false },
            title: "Order Details",
            showTop: false,
            showBottom: false
        };
    });
        
</script>    
</head>
<body>

<div id="grid_md" style="margin:5px auto;"></div>

</body>

</html>
